<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>卡片按钮页面</title>
    <link rel="stylesheet" href="../css/卡片.css" />
    <link rel="stylesheet" href="../css/首页.css" />
  </head>
  <body>
    <!-- 全屏固定背景视频 -->
    <div class="background-video">
      <video autoplay muted loop playsinline class="bg-video">
        <source src="../videos/首页视频.mp4" type="video/mp4" />
        <img src="../images/首页背景.jpg" alt="背景图备用" />
      </video>
    </div>

    <!-- 中间纯白内容容器 -->
    <div class="content-container">
      <div class="container">
        <!-- 新增：标题行容器（含返回按钮） -->
        <div class="title-container">
          <!-- 返回按钮 -->
          <div class="back-btn" id="backBtn">
            <img src="../images/返回.png" alt="返回上一页" class="back-img" />
          </div>
        </div>

        <!-- 卡片按钮容器（上下排列） -->
        <div class="card-container">
          <!-- 上方卡片按钮（仅图片） -->
          <div class="card-btn" id="upperCard">
            <img src="../images/卡片1.jpg" alt="上方卡片" class="card-img" />
          </div>

          <!-- 下方卡片按钮（仅图片） -->
          <div class="card-btn" id="lowerCard">
            <img src="../images/卡片2.jpg" alt="下方卡片" class="card-img" />
          </div>
        </div>
      </div>
    </div>

    <script src="../js/卡片.js"></script>
  </body>
</html>
